<template>
  <div
    v-loading.fullscreen="loading"
    :element-loading-text="loadText"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <el-table
      border
      :data="houseImages"
      style="width: 100%; margin-top: 16px"
      :header-cell-style="{ background: '#EDF6FF' }"
    >
      <el-table-column label="视频类型" width="100">房源视频</el-table-column>
      <el-table-column label="视频" :width="0" prop="playUrl">
        <template slot-scope="{ row }">
          <template v-if="row.playUrl">
            <video
              ref="videoDom"
              style="max-width: 500px; max-height: 300px"
              :src="row.playUrl"
              controls="controls"
              @loadedmetadata="handleLoadedmetadata"
            >
              您的浏览器不支持视频播放器
            </video>
          </template>
          <template v-else>尚未上传视频</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="{ row }">
          <div class="d-flex fd-column">
            <el-button style="margin-top: 10px; width: 90px;" size="small" type="primary" @click="handleUploadVideo">上传视频</el-button>
            <el-button style="margin-top: 10px; width: 90px; margin-left: 0px;" size="small" plain type="primary" @click="handleVrToVideo">合成视频</el-button>
            <el-button v-if="row.playUrl" style="margin-top: 10px; width: 90px; margin-left: 0px;" size="small" type="primary" plain @click="handleDeleteVideo">删除视频</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'ComTableVideo',
  components: {},
  props: {
    loading: Boolean,
    loadText: String,
    houseImages: Array,
    handleLoadedmetadata: {
      type: Function,
      default() {}
    },
    handleUploadVideo: Function,
    handleDeleteVideo: {
      type: Function,
      default() {}
    },
    handleVrToVideo: {
      type: Function,
      default() {}
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {},
  methods: {
  },
};
</script>
<style>
</style>